<!--  -->
<template>
  <div style="height: 100%;width: 100%;position: relative;">
    <el-container>
      <el-aside class="ts-aside">
        <el-collapse>
          <el-collapse-item v-for="(item, index) in viewsModulesPinia.modelActorArr">
            <template #title>
              <!-- <span>
              <i-carbon-view-filled style="cursor: pointer;" @click="changeModelShowHidden(false, index)"
                v-if="item.currentModelShowHidden" />
              <i-carbon-view style="cursor: pointer;" @click="changeModelShowHidden(true, index)" v-else />
             </span> -->
              <el-tooltip class="box-item" effect="dark" :content="item.name" placement="top">
                <span class="container">{{ item.name }}</span>
              </el-tooltip>

            </template>
            <div class="ts-setting-item">
              <span>{{ item.currentModelShowHidden ? '隐藏模型' : '显示模型' }}</span>
              <i-carbon-view-filled style="cursor: pointer;" @click="changeModelShowHidden(false, index)"
                v-if="item.currentModelShowHidden" title="隐藏模型" />
              <i-carbon-view style="cursor: pointer;" @click="changeModelShowHidden(true, index)" v-else title="显示模型" />
            </div>
            <div class="ts-setting-item">
              <span>显示类型</span>
              <el-select v-model="item.currentRepresentation"
                @change="representationChange(item.currentRepresentation, index)" placeholder="请选择显示类型">
                <el-option value="1:0:0" label="点" />
                <el-option value="1:1:0" label="线" />
                <el-option value="1:2:0" label="面" />
                <el-option value="1:2:1" label="网格" />
              </el-select>
            </div>
            <div class="ts-setting-item">
              <span>颜色依据</span>
              <el-select v-model="item.currentColor" @change="changeColorByOptions(item.currentColor, index)"
                placeholder="请选择颜色依据">
                <el-option value="">请选择</el-option>
                <el-option :value="item.value" v-for="(item, colorIndex) in currentColorList" :key="colorIndex"
                  :label="item.label" />
              </el-select>
            </div>
            <div class="ts-setting-item" v-if="item.currentColor === ''">
              <span>漫反射</span>
              <div class="ts-flex-justify-between">
                <div :class="{ 'is-active': item.modelColor === item }" class="ts-vtk-background--item"
                  v-for="(item, colorIndex) in item.backgroundColorList" @click="changeModelColor(item, index)"
                  :key="colorIndex" :style="{ backgroundColor: item }" />
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-aside>
      <el-container>
        <VtkCanvas />
      </el-container>
    </el-container>
    <div v-if="viewsModulesPinia.loadingModel" v-loading="true" class="loading" element-loading-text="请稍等，正在加载模型...">
    </div>
    <div v-if="!viewsModulesPinia.loadingIsOk" class="loading loading-ererr"><el-icon
        style="margin-right: 2px;color: #f56c6c;">
        <WarningFilled />
      </el-icon><span>模型加载失败</span></div>
  </div>
</template>

<script setup>
import { ref, reactive, onUnmounted } from 'vue'
import { storeToRefs } from "pinia";
import registerStore from '../../stores/index'
import VtkCanvas from './components/VtkCanvas.vue';
const { viewsModulesPinia, toolModulePinia } = registerStore();
const { currentColorList } = storeToRefs(viewsModulesPinia)
// const state = reactive({
//   currentModelShowHidden: true,
//   currentColor: '',
//   modelColor: '',
//   currentRepresentation: '1:2:0',
//   backgroundColorList: [
//     '#9e0142',
//     '#d53e4f',
//     '#fdae61',
//     '#409EFF',
//     '#abdda4',
//     '#a5a7c5',
//     '#394664',
//   ],
// })
const changeModelShowHidden = (value, index) => {
  toolModulePinia.showHidden(value, index);
}

const changeColorByOptions = (value, index) => {
  toolModulePinia.changeModelColor(value, index);
};

const changeModelColor = (color, index) => {
  toolModulePinia.setDiffuseReflection(color, index);
};

const representationChange = (value, index) => {
  toolModulePinia.representationChange(value, index);
};

const closeInit = (index) => {
  viewsModulesPinia.initModelInfo(index)
}
defineExpose({
  closeInit
})
</script>
<style scoped lang="scss">
.container {
  width: 100%;
  /* 设置文本容器的固定宽度 */
  overflow: hidden;
  /* 定义溢出时的处理方式 */
  text-overflow: ellipsis;
  /* 指定溢出文本的省略形式 */
  white-space: nowrap;
  /* 防止文本换行 */
}

.ts-header {
  width: 100%;
  height: 50px;
  line-height: 46px;
  overflow: hidden;
  padding: 0 10px;
  background: #f5f5f5;
}

.ts-aside {
  width: 300px;
  max-height: calc(100vh - 50px);
  padding: 8px 10px;
  background: #ffffff;
  overflow-y: auto;
}

.ts-main {
  min-height: calc(100vh - 50px);
  overflow: hidden;
  padding: 0;
}

.ts-setting-item {
  display: flex;
  align-items: center;

  &+& {
    margin-top: 20px;
  }

  span {
    margin-right: 10px;
    width: 100px;
  }

  .is-active {
    border: 2px solid #ff0000;
  }
}

.ts-collapse {
  height: calc(100vh - 60px);
  overflow: auto;
}

.loading {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}

.loading-ererr {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(102 102 102 / 50%);
  font-size: 18px;
  color: #fff;

}
</style>